<template>

    <div class="pay-container">
        <!-- 生成微信支付二维码 -->
		<div class="erwei">
			<img :src="payUrl"
				alt="">
		</div>
        <el-descriptions title="订单详情">
			<el-descriptions-item label="订单号">{{orderDetail.order_id}}</el-descriptions-item>
			<el-descriptions-item label="创建时间">{{orderDetail.create_time}}</el-descriptions-item>
			<el-descriptions-item label="产品名称">{{orderDetail.orderDetail[0].productName}}</el-descriptions-item>
			<el-descriptions-item label="商品描述">{{orderDetail.orderDetail[0].description}}</el-descriptions-item>
			<el-descriptions-item label="购买数量">{{orderDetail.orderDetail[0].quantity}}</el-descriptions-item>
			<el-descriptions-item label="购买用户">{{userInfo.nickname}}</el-descriptions-item>
			<el-descriptions-item label="手机号">{{userInfo.phone?userInfo.phone:"没有手机号码"}}</el-descriptions-item>
			<el-descriptions-item label="总价格">
				{{orderDetail.total_fee}}
			</el-descriptions-item>

		</el-descriptions>
    </div>
</template>
<script>
    // 首先要获取订单id
    import {mapState} from "vuex"
    import * as shoppingApi from "../../../../api/shopping"
    import qrCode from "qrcode"
    export default{
        computed: {
            ...mapState(['order_id','userInfo'])
        },
        data () {
            return {
                orderDetail:{
                    // 请求获取的支付订单详情
                    //数据初始化 不加 页面一开始是没有这些数据的 用来站位
                    orderDetail: [{
						productName: "",
						description: "",
						quantity: ""
					}]
                },
                // payUrlRes:{} ,//请求获取的支付结果    
                payUrl:""//支付二维码
            }
        },
        created () {
            if(!this.order_id){
                //没有订单id 有可能用户刷新了页面
                // 提示本次交易取消 返回预支付页面
                this.$alert('本次交易取消,请重新提交', '提示', {
					confirmButtonText: '确定',
					callback: action => {
						this.$router.push({ name: "pre_order" })
					}
				});

				return
            }
            // 根据订单id 请求订单详情 获取微信支付地址 我们获取地址之后生成二维码
            // 如果刷新页面 本次交易取消 我们需要让用户重新提交交易

            // 并发请求
            Promise.all([shoppingApi.getOrderDetailApi(this.order_id),shoppingApi.getPayUrlApi(this.order_id)])
            .then(res=>{
                // console.log(res);
                let orderDetail=res[0].data.data//订单的详情
                let payUrlRes=res[1].data//订单的支付地址
                this.orderDetail=orderDetail;
            //   payUrlRes.code_url;//获取了支付的二维码地址

                // 调用生成二维码的方法
                qrCode.toDataURL( payUrlRes.code_url,(err,dataUrl)=>{
                        this.payUrl=dataUrl;//生成一个二维码图片
                })
            }).catch(err=>{
                // console.log(err);
            })
            // 轮询 查询支付状态 一定要设置时间
            this.queryPayStatusInterval=setInterval(()=>{
                console.log("在轮询");
                shoppingApi.queryPayResultApi(this.order_id).then(res=>{
                   
                //    console.log(res);
                if(res.data.data){
                    clearInterval(this.queryPayStatusInterval)
                    this.$router.push({name:"paysuccess"})
                }
                })
            },200)
        },
        beforeDestroy () {
            // 组件即将销毁的时候 清除定时器
            clearInterval(this.queryPayStatusInterval)
        }
    }
</script>